<template>
	<view class="order-driver-guide" v-if="driverAndGuide">
		<card title="司导信息"> 
			<view class="content">
				<view class="person" v-for="item in driverAndGuide" :key="item.name">
					<view v-if="item.resourceType === 12 || item.resourceType === 13" class="person--wrap">
						<view class="person-title">
							<image class="icon driver" src="https://imgs.bestwehotel.com/images/inn/1boSytV3xJ" />
							<text>司机信息</text>
						</view>
						<etui label="姓名" :value="item.name || '-'"/>
						<etui label="车牌号" :value="item.licensePlateNumber || '-'"/>
						<etui label="电话" :value="item.tel || '-'"/>
						<etui label="微信" :value="item.wechatNo || '-'"/>
					</view>
					<view v-else class="person--wrap">
						<view class="person-title">
							<image class="icon guide" src="https://imgs.bestwehotel.com/images/inn/1boSyxQanS" />
							<text>导游信息</text>
						</view>
						<etui label="姓名" :value="item.name || '-'"/>
						<etui label="电话" :value="item.tel || '-'"/>
						<etui label="微信" :value="item.wechatNo || '-'"/>
					</view>					
				</view>				
			</view>
		</card>
	</view>
</template>
<script>
import card from '../../../components/card'
import etui from './etui'
export default {
	name: 'order-driver-guide',
	components: {
		card, etui
	},
	props: {
		driverAndGuide : { type: Object, default:()=>{return null} }
	},
	data() {
		return {
			// driverAndGuide : [
			// 	{
			// 		name:'李四',
			// 		licensePlateNumber: '7777',
			// 		tel: '1111',
			// 		wechatNo: '33333',
			// 		resourceType: 12
			// 	},{
			// 		name:'张三',
			// 		licensePlateNumber: '7777',
			// 		tel: '1111',
			// 		wechatNo: '33333',
			// 		resourceType:33
			// 	}
			// ]
		}
	}
}
</script>
<style lang="less">
.order-driver-guide{
	.person{
		&:not(:last-child){
			border-bottom: 1px solid #EAEAEA;
		}	
		margin-top: 30rpx;	
		&:first-child{
			margin-top: 0;
		}
		.icon{
			margin-right: 10rpx;
			&.driver{
				width: 27rpx;
				height: 30rpx;
			}
			&.guide{
				width: 37rpx;
				height: 30rpx;
			}
		}
		.person-title{
			color: #333;
			font-size: 30rpx;
			font-weight: 500;
			margin: 0 0 50rpx;
		}
		.person--wrap{
		    overflow:hidden;
			display: block;
		}
	}
}
</style>